<template>
  <div ref="artList" @scroll="onScroll" class="article-list">
    <!--
        load事件绑定的onLoad方法，会在需要加载数据时调用
            以后如果要加载列表里的数据写在onLoad里
            调用时机：
                    1. 当数据没有铺满一屏时会自动调用
                    2. 当你往上滚，滚到最后也会调用

            如果finished为true也不会调用onLoad
            如果loading为true也不会调用onLoad

        finished：
            用来标记是否全部加载完成。为false没有全部加载完成还可以继续加载，为true代表全部加载完成了

        v-model绑定的loading
            用来标记本次是否正在加载
            为true代表正在加载，为false代表没有在加载状态
            以后默认值应该给false，不用我们给true，它如果加载数据的会自动把这个值改为true
            但是我们要记得加载完数据，手动把这个值改成false

        总结：
            1. 加载数据写到onLoad里
            2. 如果本次加载数据要把loading改为false
            3. 要判断全部加载完成，如果全部加载完成要把finished改为true
     -->
   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="已经木有了啊"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.art_id" @click="$router.push(`/article/${item.art_id}`)">
        <div>
          <!-- 标题区域 -->
          <div class="title">{{ item.title }}</div>
          <!-- 图片区域 -->
          <van-grid :border="false" :column-num="item.cover.type">
            <van-grid-item
              v-for="(pic, index) in item.cover.images"
              :key="index"
            >
              <van-image :src="pic" />
            </van-grid-item>
          </van-grid>
          <!-- 底部信息 -->
          <div class="info-box">
            <div>
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ relvTime(item.pubdate) }}</span>
            </div>
            <van-icon name="cross" />
          </div>
        </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>
  </div>
</template>

<script>
// 导入接口
import { articleListAPI } from '@/api/article'

// 导入dayjs
import dayjs from 'dayjs'
// 导入相对时间插件
import relativeTime from 'dayjs/plugin/relativeTime'
// 导入中文语言包
import 'dayjs/locale/zh-cn'
// 让dayjs运用插件
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

export default {
  props: {
    channel_id: {
      required: true,
      type: Number
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      scrollTop: 0
    }
  },
  // 激活时调用：重新显示时调用
  activated () {
    // 把保存的滚动条位置赋值给div的滚动条
    this.$refs.artList.scrollTop = this.scrollTop
  },
  methods: {
    onScroll () {
      // 把滚出去的距离存到变量里
      this.scrollTop = this.$refs.artList.scrollTop
    },
    // 下拉调用的方法
    async onRefresh () {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 因为下拉就是为了加载最新的新闻（刷新最新的），所以写死当前时间戳
        timestamp: Date.now()
      })

      // 为什么这里是直接覆盖赋值？
      // 因为下拉刷新本来就是为了刷新出最新的数据，那以前的就没必要了
      this.list = res.data.results
      this.isLoading = false
    },
    // 自己封装的转换相对的时间的方法
    relvTime (time) {
      return dayjs(time).fromNow()
    },
    // 上拉加载更多的方法
    async onLoad () {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })

      // 把上一个时间段的时间戳存起来，方便下次请求来用
      this.timestamp = res.data.pre_timestamp

      // 赋值：会把原来的值给覆盖掉
      // 因为每次请求来只有10条，所以不断的在覆盖10条
      // this.list = res.data.results
      // 为了不覆盖要用push，并且为了把数组中每一条加进来要加...
      this.list.push(...res.data.results)

      // 每次加载完记得把loading改为false
      this.loading = false

      // 如果pre_timestamp为null，就代表加载完完了
      if (this.timestamp == null) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.article-list {
  position: fixed;
  top: 90px;
  bottom: 50px;
  overflow: auto;
  width: 100vw;

  .info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
        font-size: 12px;
        color:gray;
        &:nth-child(2) {
            margin: 0 15px;
        }
    }
  }
}
</style>
